import React from 'react';
import { Button, Radio } from 'antd';
import { WeaLocaleProvider, WeaDialog } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;
const RadioGroup = Radio.Group;

const RenderChooseFolder = (props) => {
  const { visible, value, options } = props;
  const prefixCls = 'email-setting-account-foldersdialog';
  const onSubmit = props.onSubmit;
  const buttons = [
    <Button
      ecId={`${
        (this && this.props && this.props.ecId) || ''
      }_Button@n3yudz@sure`}
      type="primary"
      onClick={onSubmit}
    >
      {getLabel(826, '确定')}
    </Button>,
  ];
  const onChangeFolderName = e => props.onChangeFolderName(e.target.value);
  const onCancel = props.onCancel;
  const radioStyle = {
    display: 'block',
    height: '30px',
    lineHeight: '30px',
  };
  return (
    <WeaDialog
      ecId={`${(this && this.props && this.props.ecId) || ''}_WeaDialog@2c9kfq`}
      icon="icon-coms-email"
      iconBgcolor="#a0b0ba"
      title={getLabel('522600', '选择文件夹')}
      visible={visible}
      className={prefixCls}
      style={{ width: 350, height: 200 }}
      onCancel={onCancel}
      buttons={buttons}
      hasScroll
    >
      <div className={`${prefixCls}-folder-tip`}>
        <span style={{ color: 'red' }}>
          {getLabel('525627', '标红名称为推荐文件夹')}
        </span>
      </div>
      <div className={`${prefixCls}-content`}>
        <RadioGroup
          ecId={`${
            (this && this.props && this.props.ecId) || ''
          }_RadioGroup@wictu8`}
          onChange={onChangeFolderName}
          value={value}
        >
          {options &&
            options.map(item => (
              <Radio
                ecId={`${
                  (this && this.props && this.props.ecId) || ''
                }_Radio@jggnmn@${item.key}`}
                style={
                  item.isRec ? { ...radioStyle, color: 'red' } : radioStyle
                }
                key={item.key}
                value={item.key}
              >
                {item.showname}
              </Radio>
            ))}
        </RadioGroup>
      </div>
    </WeaDialog>
  );
};

export default RenderChooseFolder;
